<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="/css/skins/skin-blue.min.css">

    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="/js/plugins/datepicker/datepicker3.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <!-- jQuery 2.2.3 -->
    <script src="/js/jquery/1.11.1/jquery.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/js/app.min.js"></script>
    <![endif]-->

    <script>

        $(document).ready(function(){

            $("#member-detail-box").empty();
            $("#member-detail-box").load("/member/memberDetail");

        });
    </script>
</head>

<body>
<div>
    <section class="content-header">
        <h1>
            每日饮食
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 健康管理</a></li>
            <li class="active">每日饮食</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                <div class="col-md-12">
                    <div class="box box-default "  >
                        <div class="box-header with-border">
                            <h3 class="box-title">请选择客户</h3>
                        </div>
                        <div class="box-body">
                            <div class="row">

                                <div class="col-md-2">
                                    <select id="selectMemberId" class="form-control select2" style="width: 100%;" onchange="chengeMemberHealthDiet()">
                                        <#list memberList as m>
                                            <#if m.memberId==member.memberId>
                                                <option value=${m.memberId} selected="true">${m.memberName}</option>
                                            <#else>
                                                <option value=${m.memberId}>${m.memberName}</option>
                                            </#if>
                                        </#list>
                                    </select>
                                </div>

                                <div hidden="hidden">
                                    <input id="memberId" type="number" value="${member.memberId}">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                    <div class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header with-border">
                                <h3 class="box-title">每日饮食记录</h3>
                            </div>
                            <div class="box-body">
                                <table id="medical" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th style="display:none">id</th>
                                        <th style="display:none">memberId</th>
                                        <th style="display:none">isupdate</th>
                                        <th>日期</th>
                                        <th>类型</th>
                                        <th>摄入卡路里</th>


                                    </tr>
                                    </thead>

                                    <tbody>
                                    <#list dietList as diet>
                                    <tr>
                                        <td style="display: none">${diet.id}</td>
                                        <td style="display: none">${diet.memberId}</td>
                                        <td style="display: none">0</td>
                                        <td>${diet.dietTime?date}</td>
                                        <td><a href="javascript:setDietDetail(${diet.id})">${diet.dietType}</td>
                                        <td>${diet.calorie}</td>
                                    </tr>
                                    </#list>
                                    <tfoot>

                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="diet-detail-context" class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">每日饮食</h3>
                    </div>
                    <div class="box-body">

                        <div class="row">
                        <div class="col-lg-6 form-group">
                            <label>日期</label>
                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                            <#--</div>-->
                                <input type="text" class="form-control pull-right"
                                <#--value="${member.checkInDay?date}"-->
                                       id="health_diet_date" placeholder="点击输入 ...">
                            </div>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label>类型</label>
                            <select id="health_diet_type" class="form-control select2" style="width: 100%;">
                                <option value="早餐" <#if diet.gender='水'> selected="selected"</#if>>早餐</option>
                                <option value="午餐" <#if diet.gender='米饭'> selected="selected"</#if>>午餐</option>
                                <option value="晚餐" <#if diet.gender='米饭'> selected="selected"</#if>>晚餐</option>
                                <option value="水" <#if diet.gender='米饭'> selected="selected"</#if>>水</option>
                                <option value="甜点" <#if diet.gender='米饭'> selected="selected"</#if>>甜点</option>
                            </select>
                        </div>
                        </div>

                        <div id="diet_detail_list" >
                            <div class="row">
                                <div class="col-lg-6 form-group">
                                    <label>食物种类(卡路里/KG)</label>
                                    <select  name="foodType" class="form-control select2" style="width: 100%;">
                                        <#list food_type_list as food_type>
                                            <option value='${food_type.foodType}'>${food_type.foodType}(${food_type.calorie})</option>
                                        </#list>

                                    </select>
                                </div>

                                <div class="col-lg-3 form-group">
                                    <label class="col-lg-12">摄入量</label>
                                    <input type="text" name="foodCount" class="form-control"
                                           placeholder="点击输入..." >
                                </div>
                                <div class="col-lg-3 form-group">
                                    <label class="col-lg-12">摄入单位</label>
                                    <select name="foodUnit" class="form-control select2" style="width: 100%;">
                                        <option value="克" selected="selected">克</option>
                                        <option value="升" >毫升</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="box-body">
                        <div class=" col-lg-12">
                            <label class="col-lg-12"></label>
                            <button id="addFood" class="btn btn-info pull-left"
                                    onclick="addFood()">新增食物
                            </button>
                            <button id="addHealthDiet" type="submit" class="btn btn-info pull-right"
                                    onclick="addHealthDiet()">新增
                            </button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        </div>

    </section>

</div>
<!-- Content Wrapper. Contains page content -->

<!-- jQuery 2.2.3 -->
<script src="/js/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/js/bootstrap/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/js/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- bootstrap datepicker -->
<script src="/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/js/plugins/timepicker/bootstrap-timepicker.js"></script>
<script src="/js/plugins/daterangepicker/daterangepicker.js"></script>
<script>


    $('#datepicker').datepicker({
        autoclose: true
    });
    $('#health_diet_date').datepicker({
        autoclose: true,
        format: "yyyy-mm-dd"
    });

//    $('#health_diet_date').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});


    var input = document.createElement("input");
    input.type="text" ;
    input.placeholder='请双击输入内容';

    //得到当前的单元格
    var currentCell ;

function editCell(event)
{

    //dom创建文本框

    if(event==null)
    {
        currentCell=window.event.srcElement;
    }
    else
    {
        currentCell=event.target;
    }
    if (currentCell.innerHTML!='请双击输入内容'){
        input.value=currentCell.innerHTML;
    }else {
        input.value='';
    }
    //根据Dimmacro 的建议修定下面的bug 非常感谢
    if(currentCell.tagName=="TD"){

        currentCell.parentElement.children[2].innerText='1';
        //用单元格的值来填充文本框的值
        if (currentCell.innerHTML!='请双击输入内容'){
            input.value=currentCell.innerHTML;
        }
        //当文本框丢失焦点时调用last
        input.onblur=last;
        input.ondblclick=last;
        currentCell.innerHTML="";
        //把文本框加到当前单元格上.
        currentCell.appendChild(input);
        //根据liu_binq63 的建议修定下面的bug 非常感谢
        input.focus();

    }


}

function last()
{
    if (input.value==''){
        currentCell.innerHTML = '请双击输入内容';
    } else {
        //充文本框的值给当前单元格
        currentCell.innerHTML = input.value;
    }

}

    //最后为表格绑定处理方法.
    document.getElementById("medical").ondblclick=editCell;
    document.getElementById("health_index").ondblclick=editCell;



</script>
</body>
</html>
